<template>
	<view class="backview">
		<lexiconNavVue title="| 文章阅读 |" />
		<view class="main">
			<view class="top-menu"></view>
			<view class="message-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y :scroll-with-animation='true'>
				
			</view>
			<view class="bottom-back">
					<view class="pipei_room_btn" @click="submitBtn()" style="width: 53%;">
						确认提交
						<view class="btn-en">Start</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: 0,
			}
		},
		onLoad(options) {
		},
		onReady() {
			const that = this
			that.$nextTick(function() {
				uni.createSelectorQuery().select('.top-menu').boundingClientRect(rect => {
					that.scrollHeight = uni.getSystemInfoSync().screenHeight - rect.bottom -
						80;
				}).exec();
			})
		},
		methods: {
			submitBtn () {
			}
		}
	}
</script>

<style lang="less" scoped>
	.backview {
		background: radial-gradient(circle, #373632, #000);
		width: 100%;
		height: 100vh;
		text-align: center;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		position: relative;
		flex-direction: column;
		background-image: url(../../static/image/homePage/diwen.png);
		background-size: 100% auto;
		background-position: top left;
		background-repeat: repeat-y;
		box-sizing: border-box;
	}
	.top-menu{
		width: 100%;
		height: 1px;
	}
	.message-scroll {
		width: 100%;
		background-color: #fff6cb;
	}
	.pipei_room_btn {
		width: 200px;
		color: black;
		margin: 0 auto;
		background: yellow;
		border-radius: 12px;
		height: 50px;
		padding-top: 12px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
		margin: 16px auto 0;
	}
</style>